<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../030PC端管理后台页面/iconfont/iconfont.css">
    <link rel="stylesheet" href="../030PC端管理后台页面/css/common.css">
    <style>
        *{margin: 0;padding: 0;}
        body{overflow:scroll;}
        ul{list-style: none;}
        img{display: block;}
        a{text-decoration: none;color: #555;}

        header{height: 45px;background: #00b38a;font-size: 20px;color: white;
        text-align: center;line-height: 45px;}

        .login{height: 43px;display: flex;justify-content: space-between;align-items: center;
        font-size: 14px}
        .login p{margin-left: 16px;}
        .login div{width: 84px;height: 30px;background: #f5f5f5;margin-right: 15px;
        border-radius: 15px;line-height: 30px;text-align: center;}
        .login div a{display: block;height: 100%;width: 100%;}

        .list li{height: 90px;border-top: 1px #e8e8e8 solid;display: flex;align-items: center;}
        .list .list_img{width: 60px; margin: 0 10px 0 14px;}
        .list .list_img img{width: 100%;}
        .list .list_info{flex: 1;}
        .list .list_info h2{font-size: 18px;}
        .list .list_info p:first-of-type{margin-top: 4px; font-size: 14px;display: flex;justify-content: space-between;}
        .list .list_info p:first-of-type span:last-of-type{margin-right: 14px; color: #17b994;}
        .list .list_info p:last-of-type{font-size: 12px;color: #888;margin-top: 8px;}
        .more{height: 50px;background: #fafafa;border-top: 1px #e8e8e8 solid;
        text-align: center;line-height: 50px;}
        .more a{width: 100%;height: 100%;display: block;}
        
        footer{height: 115px;text-align: center;font-size: 22px;line-height: 22px;padding-top: 27px;box-sizing: border-box;}
        
        .tabbar{height: 45px;border-top: 1px #e8e8e8 solid;display: flex;width: 100%;
        position: fixed;bottom: 0;background: #f6f6f6;font-size: 18px;color: #c2cfcc;}
        .tabbar i{font-size: 22px;position: relative;top: 2px;}
        .tabbar div{flex: 1;text-align: center;line-height: 45px;}
        .tabbar .active{background: #e7f3f0;}
    </style>
</head>
<body>
    <header>拉勾网</header>
    <section class="login"> 
        <p>10秒钟定制职位</p>
        <div><a href="#">去登录</a></div>
    </section>
    <ul class="list">
        <li>
            <div class="list_img">
                <a href="#"><img src="./img/1.jpeg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13k-20k</span>
                </p>
                <p>今天11:15</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="./img/1.jpeg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13k-20k</span>
                </p>
                <p>今天11:15</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="./img/1.jpeg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13k-20k</span>
                </p>
                <p>今天11:15</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="./img/1.jpeg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大爱特</a></h2>
                <p>
                    <span>中级java开发工程师</span>
                    <span>13k-20k</span>
                </p>
                <p>今天11:15</p>
            </div>
        </li>
    </ul>
    <section class="more"><a href="#">加载更多</a></section>
    <footer>
        <p>@2015 lagou.com,all right reserved</p>
        <p>
            <a href="#">移动版</a> · <a href="#">移动版</a> · <a href="#">移动版</a>
        </p>
    </footer>
    <section class="tabbar">
        <div class="active"><i class="iconfont icon-shouye"></i>职位</div>
        <div><i class="iconfont icon-sou"></i>搜索</div>
        <div><i class="iconfont icon-user-filling"></i>我的</div>
    </section>
</body>
</html>